<template lang="pug">
div(style="display: none;")
  table(
    id="table")
    thead
      tr
        td(v-for="columnName in exportList"
            :key="columnName") {{columns[columnName].label}}
    tbody
      tr(
        v-for="(data, index) in dataList"
        :key="index")
        td(
          v-for="columnName in exportList"
          :key="columnName")
          InfoRender(
            :full="data"
            :data="data[columnName]"
            :column="columns[columnName]"
            :minLength="columns[columnName].minLength"
            :isWarp="true")
            template(slot-scope="props") {{ props.content | contentFormat }}
</template>

<script>

/**
 * @name ExcelTable 导出组件
 * @author 黄丰瑞 <huangfr@gddit.com>
 * @description 通过字段数组，字段配置形成导出数据
 */

import { isString } from 'lodash'
import InfoRender from '@/components/InfoRender'
import tableExport from 'table-export'

export default {
  name: 'excelTable',
  components: {
    InfoRender
  },
  props: {
    title: { // 导出的文件名
      type: String
    },
    isTime: { // 文件名是否添加时间
      type: Boolean,
      default: true
    },
    exportList: { // 字段数组
      type: Array,
      default: () => []
    },
    isExport: { // 是否导出
      type: Boolean,
      default: false
    },
    dataList: { // 数据
      type: Array,
      default: () => []
    },
    columns: { // 字段列配置
      type: Object,
      default: () => ({})
    }
  },
  filters: {
    contentFormat (value) {
      return isString(value) ? value.replace(',', '，') : value
    }
  },
  methods: {
    exportEvent () {
      const time = this.isTime ? this.$moment().format('YYYYMMDDHHmmss') : ''
      tableExport('table', this.title + time, 'csv')
    }
  }
}
</script>
